<script>
export default {
  name: "Hover3DCard",
  mounted() {
    const card = document.querySelector('.card');
    const xRange = [-10, 10]
    const yRange = [-10, 10]

    const getRotate = (range, value, max) => {
      return value / max * (range[1] - range[0]) + range[0]
    }

    card.onmousemove = e => {
      const {offsetX, offsetY} = e
      const {offsetWidth, offsetHeight} = card
      const ry = -getRotate(yRange, offsetX, offsetWidth)
      const rx = getRotate(xRange, offsetY, offsetHeight)
      card.style.setProperty('--rx', `${rx}deg`)
      card.style.setProperty('--ry', `${ry}deg`)
    }

    card.onmouseleave = e => {
      card.style.setProperty('--rx', 0)
      card.style.setProperty('--ry', 0)
    }
  }
}
</script>

<template>
  <div class="container">
    <div class="card">
      <img src="../assets/card.png">
    </div>
  </div>
</template>

<style scoped lang="less">
.container {
  background: #000;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  .card {
    height: fit-content;
    width: fit-content;
    border-radius: 10px;
    transition: 0.3s;
    transform: perspective(500px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));

    img {
      border-radius: inherit;
      width: calc(1440px / 6);
      height: calc(2560px / 6);
    }
  }

  .card:hover {
    box-shadow: -3px -3px 10px #54a29e, 3px 3px 10px #a79d66;
  }
}
</style>